<template>
	<div class="invite flexv">
		<!-- 头部 -->
		<pubHead title="邀请好友"></pubHead>

		<div class="invite_box flexv">
			<img src="@/assets/record-title-ico.png" class="invite_infos" alt="">

			<div class="invite_info_box flex">
				<div class="left flexv flex1 flexc">
					<p class="">邀请好友</p>
					<p class="nums ali-b"><span>{{inviteInfo.subordinate}}</span>人</p>
				</div>
				<div class="left flexv flex1 flexc">
					<p class="">下单成功好友</p>
					<p class="nums ali-b"><span>{{inviteInfo.order}}</span>人</p>
				</div>
			</div>

			<img src="@/assets/share-title-ico.png" class="note_infos" alt="">

			<div class="note_box flex">
				<div class="item flexv flex1 ali-c">
					<p class="nums white tc">1</p>
					<p class="tc mt2">发送邀请给好友</p>
				</div>
				<div class="item flexv flex1 ali-c">
					<p class="nums white tc">2</p>
					<p class="tc mt2">好友登录或下单成功</p>
				</div>
				<div class="item flexv flex1 ali-c">
					<p class="nums white tc">3</p>
					<p class="tc mt2">领取奖励</p>
				</div>
			</div>

			<div class="share_btn white tc" @click="showShare">立即分享</div>
		</div>

		<div class="rules white tc" @click="toRule">活动规则</div>

		<van-popup v-model="show" class="flex share_popup" position="bottom">
			<div class="share_box flexv">
				<div class="title tc">分享</div>
				<div class="flex1 jus-a ali-c">
					<div class="share_item flexv" @click="shareOut">
						<img src="@/assets/wechat.png" alt="">
						<p class="tc">微信好友</p>
					</div>
					<div class="share_item flexv" @click="showPost">
						<img src="@/assets/photo.png" alt="">
						<p class="tc">生成海报</p>
					</div>
				</div>
			</div>
		</van-popup>
		<!-- 生成海报 -->
		<van-popup style="background-color: transparent;" v-model="visiblePost" @click-overlay="closeShareBox" position="center">
			<div style="width: 6.4rem;" @click="closeShareBox">
				<img :src="postUrl"/>
			</div>
		</van-popup>
		<div ref="myPost" class="myPost">
			<img class="myPost-img" src="@/assets/invite.jpg" />
			<div class="myPost-box">
				<div class="flex">
					<div class="avatar">
						<img :src="myInfo.avatar" id="myAvatar" />
					</div>
					<div class="detail">
						<p>{{myInfo.nickname}}</p>
						<p>马帮GO，共度欢乐时光</p>
						<p>扫一扫立即加入</p>
					</div>
					<div class="myCode">
						<img :src="myImage" id="myCode"/>
					</div>
				</div>
			</div>
		</div>
		<!-- 最终分享弹窗 -->
		<van-popup v-model="final" class="flex finally-share-box">
		    <div class="finally-share flex1 flexv">
		        <div class="flex img-box">
		            <img src="@/assets/wecheat-share.png" alt="" class="fill">
		        </div>
		        <p class="click white tc" @click="cancel">我知道了</p>
		    </div>
		</van-popup>
		
	</div>
</template>
<script>
	import Vue from 'vue';
	import pubHead from '@/components/head';
	import {
		Toast,
		Popup
	} from 'vant';
	import html2canvas from 'html2canvas'
	import {
		invite,
		invitePost,
		wxConfigApi
	} from '@/request/api.js'
	import wx from 'we-jssdk'; // 导入jssdk
	Vue.use(Toast, Popup);
	export default {
		data() {
			return {
				show: false,
				visiblePost: false,
				inviteInfo: {},
				myInfo: {},
				myImage: '',
				postUrl:null,
				xianshi:false,
				final: false// 最终分享
			}
		},
		components: {
			pubHead,
			"van-popup": Popup
		},
		created() {
			let list = this.$route.params
			this.myInfo = list //将上个页面的我的信息赋值
			this.getData()
		},
		methods: {
			// 获取数据
			getData() {
				let that = this
				that.$loading()
				invite({
					token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
				}).then(res => {
					that.inviteInfo = res.data
					that.getSignPackage()
					Toast.clear()
				})
				invitePost({
					token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
				}).then(res => {
					that.myImage = res.data
				})
			},
			// 去活动规则
			toRule() {
				this.$router.push('/rules');
			},
			// 生成海报
			showPost() {
				this.xianshi = true
				this.show = false
				this.visiblePost = true
				this.toImage()
			},
			toImage() {
				let that = this
				that.$loading()
				var c = document.getElementById('myAvatar');
				var d = document.getElementById('myCode');
				const timer = setInterval(() => {
					if(c.complete && d.complete)
					{
						html2canvas(that.$refs.myPost, {
							backgroundColor: null,
							timeout: 500, // 加载延时
							useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
						}).then((canvas) => {
							clearInterval(timer);
							let url = canvas.toDataURL('image/png')
							this.postUrl = url
							Toast.clear()
							// this.xianshi = false
						})
					}
						
			}, 50)
		},
			// 立即分享
			showShare() {
				this.show = true;
			},
			// 分享
			shareOut(){
			    this.final = true;
				this.show = false
			},
			cancel(){
				this.final = false;
			},
			// 关闭分享弹出回调
			closeShareBox() {
			    this.visiblePost = false
				this.postUrl=''
			},
			// 获取微信签名
			getSignPackage(){
			    let that = this;
			    wxConfigApi({
			        url: location.href.split('#')[0]
			    }).then(res =>{
			        if(res.code == 1){
			            // 返回的签名信息
			            const signPackage = res.data.sign;
			            const url = that.inviteInfo.url;
			            const title = '分享有礼';
						const img = 'http://mbgo.0791jr.com/wx_index/image/invite.jpg';
			
			            wx.config({
			                debug: false, // 开启调试模式
			                appId: signPackage.appId, // 必填，公众号的唯一标识
			                timestamp: signPackage.timestamp, // 必填，生成签名的时间戳
			                nonceStr: signPackage.nonceStr, // 必填，生成签名的随机串
			                signature: signPackage.signature, // 必填，签名，见附录1
			                jsApiList: [
			                    'onMenuShareTimeline',// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
			                    'onMenuShareAppMessage'//分享好友
			                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			            });
			            wx.ready(() => {
			                // 分享给朋友
			                wx.onMenuShareAppMessage({
			                    title: title, // 分享标题
			                    link: url, // 分享链接
			                    desc: '加入马帮GO，共享美好生活', // 副标题
			                    imgUrl: img, // 分享图标
			                    success () {
			                        // 用户成功分享后执行的回调函数
			                        // Toast('分享成功')
			                    },
			                    cancel () {
			                        // 用户取消分享后执行的回调函数
			                    }
			                });
			                // 分享到朋友圈
			                wx.onMenuShareTimeline({
			                    title: title, // 分享标题
			                    link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			                    imgUrl: img, // 分享图标
			                    success() {
			                    },
			                    cancel() {
			                    }
			                });
			            });
			            wx.error(function(res){
			            });
			        }
			    })
			}
		}
	}
</script>
<style lang="less" scoped>
	.invite {
		min-height: 100vh;
		background: linear-gradient(to bottom, rgba(252, 98, 44, 1), rgba(253, 158, 106, 1), rgba(253, 199, 105, 1));

		.invite_box {
			min-height: calc(100vh - 0.88rem);
			padding: 0 0.24rem;
			background: url('~@/assets/share-bg.png') no-repeat top center;
			background-size: 100%;

			.invite_infos {
				width: 3.4rem;
				height: 0.36rem;
				margin: 4.7rem auto 0;
			}

			.invite_info_box {
				height: 2.44rem;
				margin-top: 0.14rem;
				padding: 0.6rem 0;
				font-size: 0.3rem;
				line-height: 120%;
				color: #B97F43;
				background: url('~@/assets/record-bg.png') no-repeat center;
				background-size: 100%;

				.nums {
					margin-top: 0.2rem;

					span {
						color: #ff4400;
					}
				}
			}

			.note_infos {
				width: 4.24rem;
				height: 0.36rem;
				margin: 0.4rem auto 0;
			}

			.note_box {
				height: 2.54rem;
				margin-top: 0.26rem;
				padding: 0.5rem;
				border-radius: 0.1rem;
				background-color: #fff;

				.item {
					margin: 0 0.2rem;
					position: relative;

					p {
						font-size: 0.3rem;
						line-height: 120%;
						color: #B97F43;
					}

					.white {
						color: #FFFFFF;
					}

					.nums {
						width: 0.48rem;
						height: 0.48rem;
						border-radius: 100%;
						font-size: 0.3rem;
						line-height: 0.48rem;
						background-color: #BE7E44;
						z-index: 2;
					}
				}

				.item:nth-child(2)::before,
				.item:nth-child(2)::after {
					content: "";
					width: 1.6rem;
					height: 0;
					margin: auto 0;
					border-top: 1px dotted #EBC19C;
					position: absolute;
					z-index: 1;
					top: 0.24rem;
				}

				.item:nth-child(2)::before {
					left: -1.08rem;
				}

				.item:nth-child(2)::after {
					right: -1.08rem;
				}
			}

			.share_btn {
				height: 1rem;
				margin: 0.6rem 0;
				font-size: 0.36rem;
				line-height: 1rem;
				font-weight: bold;
				background: linear-gradient(0deg, rgba(252, 85, 34, 1) 0%, rgba(254, 140, 78, 1) 100%);
				border-radius: 0.5rem;
			}
		}

		.rules {
			width: 1.6rem;
			height: 0.66rem;
			position: fixed;
			z-index: 100;
			top: 3.8rem;
			right: 0;
			border-radius: 0.33rem 0 0 0.33rem;
			font-size: 0.3rem;
			line-height: 0.66rem;
			background-color: #9550FB;
		}

		.share_popup {
			width: 100%;
			border-radius: 0.16rem 0.16rem 0 0;
			overflow: hidden;
			.share_box {
				width: 100%;
				height: 4rem;

				.title {
					font-size: 0.32rem;
					line-height: 1rem;
					color: #333;
					border-bottom: 1px solid #e6e6e6;
				}

				.share_item {
					img {
						width: 1.1rem;
						height: 1.1rem;
						margin: auto 0;
					}

					p {
						margin-top: 0.3rem;
						font-size: 0.3rem;
						line-height: 120%;
						color: #999;
					}
				}
			}
		}

		.myPost {
			width: 6.4rem;
			height: 8.4rem;
			position: fixed;
			z-index: 1;
			top: -500%;
			right: -500%;
			.myPost-img {
				width: 6.4rem;
				height: 6.4rem;
			}
			.myPost-box {
				background-color: #FFFFFF;
				padding: .2rem;
				height: 2rem;
				.avatar {
					width: 1.6rem;
					height: 1.6rem;
					img {
						border-radius: 100%;
					}
				}

				.detail {
					flex: 1;
					padding: .1rem;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					overflow: hidden;

					p {
						font-size: .24rem;
					}
				}

				.myCode {
					width: 1.6rem;
					height: 1.6rem;
				}
			}
		}
		.finally-share-box{
		    width: 100%;
		    background-color: rgba(0, 0, 0, 0.2);
		    .finally-share{
		        width: 100%;
		        max-width: 750px;
		        height: 100vh;
		        margin: 0 auto;
		        .img-box{
		            width: 5.64rem;
		            height: 3.9rem;
		            margin: 0 0.4rem 0 auto;
		        }
		        .white{
		            width: 1.58rem;
		            height: 0.6rem;
		            margin: 0.36rem auto 0;
		            border-radius: 0.1rem;
		            font-size: 0.28rem;
		            line-height: 0.6rem;
		            background-color: #ff5000;
		        }
		    }
		}
	}
</style>
